<template>
  <div class="phone">
    <div class="wechat-preview">
      <div class="top">
        <div class="desc">客户</div>
      </div>
      <div class="main-content">
        <div class="timer">{{ timer }}</div>
        <div class="row" v-show="content">
          <div class="avatar">
            <i class="el-icon-user-solid"></i>
          </div>
          <pre class="text-box">{{ content || "请输入内容" }}</pre>
        </div>
        <div v-for="(item, index) in attachments" :key="index" class="row">
          <div class="avatar">
            <i class="el-icon-user-solid"></i>
          </div>
          <div v-if="item.materialType == 1" class="text-box image">
            <img :src="item.ossUrl" alt="" />
          </div>
          <div v-if="item.materialType == 2" class="text-box webpage">
            <div class="webpage-title">
              {{ item.title }}
            </div>
            <div class="webpage-desc flex-contain">
              <p class="flex-1">{{ item.linkDesc }}</p>
              <img :src="item.ossUrl" alt="" />
            </div>
          </div>
          <div v-if="item.materialType == 3" class="text-box wechatMini">
            <div class="wechatMini-title">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xiaochengxu"></use></svg
              >{{ item.title }}
            </div>
            <div class="image">
              <img :src="item.ossUrl" alt="" />
            </div>
          </div>
          <div v-if="item.materialType == 4" class="text-box video">
            <img
              :src="
                item.ossUrl + '?x-oss-process=video/snapshot,t_10000,m_fast'
              "
              alt=""
            />
            <div class="icon"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";

export default {
  name: "WechatPreview",
  props: {
    content: {
      type: String,
      default: "",
    },
    attachments: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      rules: {},
    };
  },
  // watch: {
  //   content(val) {
  //     console.log("[ this.content ] >", this.content);
  //     console.log("[ this.val ] >", this.val);
  //   },
  //   attachments() {
  //     console.log("[ this.attachments ] >", this.attachments);
  //   },
  // },
  computed: {
    timer() {
      moment.locale("zh-cn");
      return moment().format("a hh:mm");
    },
  },
  mounted() {},
};
</script>

<style scoped lang="scss">
.phone {
  width: 420px;
  height: 853px;
  background: url(//static.lianhaikeji.com/images/20210610/8ba8651148b2411ba933a7fa139a8c72.png)
    center / 100% no-repeat;
  transform: scale(0.7);
  transform-origin: left top;
  padding: 77px 23px 0;
}
.wechat-preview {
  width: 375px;
  height: 735px;
  overflow-y: auto;
  background: #f5f5f5;
  background-color: #ebebeb;
  border-radius: 10px;

  .top {
    padding: 10px 0;
    text-align: center;

    .desc {
      font-size: 16px;
    }
  }

  .main-content {
    position: relative;

    .timer {
      font-size: 16px;
      text-align: center;
      color: #9f9f9f;
      margin-bottom: 10px;
    }

    .row {
      display: flex;
      margin-bottom: 16px;

      .text-box {
        max-width: 250px;
        white-space: pre-wrap;
        word-wrap: break-word;
        background-color: #fff;
        margin: 0 10px 0 14px;
        border-radius: 6px;
        padding: 10px;
        position: relative;
        font-size: 18px;

        &::after {
          content: "";
          position: absolute;
          left: -8px;
          top: 10px;
          border-top: 6px solid transparent;
          border-bottom: 6px solid transparent;
          border-right: 8px solid #fff;
        }
      }

      .image,
      .video {
        position: relative;
        img {
          width: 100%;
        }
        .icon {
          width: 50px;
          height: 50px;
          position: absolute;
          top: 0;
          right: 0;
          left: 0;
          bottom: 0;
          margin: auto;
          background: url(https://static.lianhaikeji.com/workwx/20210609/企微112图片20210609204054.png)
            center / 100% no-repeat;
        }
      }
      .webpage {
        width: 220px;
        line-height: 20px;
        &-title {
          font-size: 16px;
          margin-bottom: 10px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        &-desc {
          font-size: 14px;
          color: #999;
          p {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            margin-right: 10px;
          }
          img {
            width: 50px;
            height: 50px;
          }
        }
      }
      .wechatMini {
        /*width: 220px;*/
        line-height: 20px;
        &-title {
          font-size: 16px;
          margin-bottom: 10px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          .icon {
            margin-right: 6px;
          }
        }
        .image {
          width: 220px;
          img {
            width: 100%;
          }
        }
      }
    }

    .avatar {
      width: 30px;
      height: 30px;
      border-radius: 4px;
      background-color: #fff;
      text-align: center;
      margin-left: 20px;

      .el-icon-user-solid {
        color: #2f88ff;
        font-size: 26px;
        line-height: 30px;
      }
    }
  }
}
</style>
